import React from "react";
import { Input, Button, List } from "antd";

const ToDoListUI = (props) => {
  const { inputValue, inputChange, butClick, list, deleteItem } = props;
  return (
    <div style={{ margin: "10px" }}>
      <Input
        placeholder="请输入内容"
        value={inputValue}
        style={{ width: "300px", marginRight: "10px" }}
        onChange={inputChange}
      />
      <Button type="primary" onClick={butClick}>
        提交
      </Button>
      <List
        style={{ width: "300px", marginTop: "10px" }}
        bordered
        dataSource={list}
        renderItem={(item, index) => (
          <List.Item onClick={() => deleteItem(index)}>{item}</List.Item>
        )}
      />
    </div>
  );
};

export default ToDoListUI;
